<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" >
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="selectCity">
    <div class="provice">
        <a class="proviceTitle">请选择省</a>
    </div>
    <div class="city">
        <a class="cityTitle">请选择城市</a>
    </div>
    <div class="area">
        <a class="areaTitle">请选择区县</a>
    </div>
</div>

<script>
    var arr = [
        {name:"安徽",childName:
                [{
                    name:"宿州",childName:[{name:"墉桥"},{name:"泗县"},{name:"灵璧"},{name:"萧县"},{name:"砀山"},{name:"其他"}]
                },{
                    name:"安庆",childName:[{name:"大观"},{name:"迎江"},{name:"宜秀"},{name:"桐城"},{name:"枞阳"},{name:"怀宁"},{name:"潜山"},{name:"宿松"},{name:"岳西"},{name:"其他"}]
                }]},
        {name:"浙江",childName:
                [{
                    name:"杭州",childName:[{name:"西湖"},{name:"拱墅"},{name:"江干"},{name:"下城"},{name:"上城"},{name:"余杭"},{name:"萧山"},{name:"滨江"},{name:"建德"},{name:"富阳"},{name:"临安"},{name:"桐庐"},{name:"淳安"},{name:"杭州周边"}]
                }, {
                    name: "宁波", childName: [{name: "海曙"}, {name: "江东"}, {name: "江北"}, {name: "鄞州"}, {name: "北仑"}, {name: "镇海"}, {name: "高新区"}, {name: "余姚"}, {name: "慈溪"}, {name: "象山"}, {name: "奉化"}, {name: "桐庐"}, {name: "宁海"}, {name: "宁波周边"}]
                }]}];

    //创建新元素
    var createOpt = function(arr,appendEle){
      for(var i =0;i<arr.length;i++){
        $("<a>").appendTo($("<li>").appendTo(expand.appendTo(appendEle))).html(arr[i].name).attr("value",i);
      }
    }
    var expand = $("<ul>").appendTo("body").addClass("expand").addClass("list-inline").hide();
    $(".proviceTitle").on("click",function(){
      expand.empty().show();
      createOpt(arr,$(".provice"));
    });

    $(".provice").on("click","li",function(){
      var _self = $(this);
      expand.empty();
      $(".proviceTitle").html(_self.find("a").html()).attr("value",_self.find("a").attr("value"));
      var idxProvice = $(".proviceTitle").attr("value");
      createOpt(arr[idxProvice].childName,$(".city"));
    })

    $(".cityTitle").on("click",function(){
      expand.empty().show();
      var idxProvice = $(".proviceTitle").attr("value");
      createOpt(arr[idxProvice].childName,$(".city"));
    });

    $(".city").on("click","li",function(){
      var _self = $(this);
      expand.empty().show();
      $(".cityTitle").html(_self.find("a").html()).attr("value",_self.find("a").attr("value"));
      var idxProvice = $(".proviceTitle").attr("value");
      var idxCity = $(".cityTitle").attr("value");
      createOpt(arr[idxProvice].childName[idxCity].childName,$(".area"));
    });

    $(".area").on("click","li",function(){
      $(".areaTitle").html($(this).find("a").html());
      expand.hide();
    });

    $(".areaTitle").on("click",function(){
      expand.empty().show();
      var idxProvice = $(".proviceTitle").attr("value");
      var idxCity = $(".cityTitle").attr("value");
      createOpt(arr[idxProvice].childName[idxCity].childName,$(".area"));
    });

    $(".selectCity").on("click",function(e){
      e.stopPropagation();
    });
    $(document).on("click",function(){
      expand.hide();
    });
</script>
</body>
</html>